<template>
  <table-form-dialog v-model="visible"
                     @close="close"
                     width="400px"
                     @container="container"
                     :title="title">
    <div class="dialog-box">
      <el-form :model="form"
               ref="ruleForm"
               class="demo-ruleForm">
        <el-form-item label=""
                      prop="reason"
                      :rules="[{ required: true, message: '不能为空' }]">
          <el-input type="textarea"
                    maxlength="200"
                    show-word-limit
                    v-model="form.reason"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </table-form-dialog>
</template>

<script>
import TableFormDialog from "@components/dialog/Dialog";
import { mapState } from "vuex";

export default {
  name: "Reject",
  props: {
    id: {
      type: Number,
      default: null
    },
    receiptAttachList: {
      type: Array,
      default: () => []
    },
    goodsQuantity: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: "拒绝"
    },
    api: {
      type: Function,
      default: () => { }
    },
    filedName: {
      type: String,
      default: "id"
    }
  },
  components: { TableFormDialog },
  computed: {
    ...mapState({
      visible: (state) => state.table.visible
    }),
    postData () {
      return {
        ...this.form
      };
    }
  },

  created () { },
  data () {
    return {
      form: {
        reason: ""
      }
    };
  },
  methods: {
    changFormData (value) {
      this.ruleForm = value;
    },
    close () {
      this.$store.commit("table/visibleFalse");
    },
    container () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.action();
        }
      });
    },
    async action () {
      this.postData[this.filedName] = this.id;
      let { code, message } = await this.api({
        ...this.postData,
        ...this.form
      });
      this.$store.commit("table/visibleFalse");
      this.$message[code === 0 ? "success" : "error"](message);
      if (code === 0) window.close();
    }
  }
};
</script>

<style></style>
